.pie {
  transform: scale3d(1.1, 1.1, 1.1);
  position: relative;
  margin: 20px auto;
  padding: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}
.pie .center {
  position: relative;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  border-radius: 50%;
  background-color: #042242;
}
.pie .center .inner {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 25px;
  left: 25px;
  border-radius: 50%;
  background-color: #4e54c8;
}
.pie .center .fas {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 99;
  color: #fff;
  font-size: 20px;
  transform: translate(-50%, -50%);
}
.pie .slice {
  background-color: #4e54c8;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
  border-left: 3px solid #02192f;
}
.pie .slice:active {
  background-color: #268cf2;
}
.pie .slice:active .dv .sj {
  border-bottom: 10px solid white;
}
.pie .slice .dv {
  transform: skewY(45deg) rotate(22.5deg);
  margin-top: 105px;
  margin-left: 15px;
}
.pie .slice .dv .sj {
  position: fixed;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ffffff;
  border-left: 10px solid transparent;
}
.pie .slice.slice-one {
  transform: rotate(-22.5deg) skewY(-45deg);
}
.pie .slice.slice-two {
  transform: rotate(22.5deg) skewY(-45deg);
}
.pie .slice.slice-three {
  transform: rotate(67.5deg) skewY(-45deg);
}
.pie .slice.slice-four {
  transform: rotate(112.5deg) skewY(-45deg);
}
.pie .slice.slice-five {
  transform: rotate(157.5deg) skewY(-45deg);
}
.pie .slice.slice-six {
  transform: rotate(202.5deg) skewY(-45deg);
}
.pie .slice.slice-seven {
  transform: rotate(247.5deg) skewY(-45deg);
}
.pie .slice.slice-eight {
  transform: rotate(292.5deg) skewY(-45deg);
}
